<template>
  <view class="container">
    <view class="content">
      <view>
        <TImage :src="item.avatar" width="200rpx" height="250rpx" error-img-type="person" />
      </view>
      <view class="info">
        <view class="_title">
          <view class="disFlxJS">
            <text class="-name">{{ item.name }}</text>
            <view class="-leader">{{ leaderText }}</view>
          </view>
          <view class="-level">{{ item.socialPosition }}</view>
        </view>
        <view class="_wx">
          <text class="-k">公众号</text>
          <text
            v-if="item.isOfficialAccount === IsOfficialAccountEnum.FOLLOWED"
            class="-v"
            style="color: #2878ff"
          >
            已关注
          </text>
          <text v-else-if="item.isOfficialAccount === IsOfficialAccountEnum.NOTFOLLOWED" class="-v">
            未关注
          </text>
          <text v-else class="-v">--</text>
        </view>
        <view class="_wx">
          <text class="-k">小程序</text>
          <text v-if="item.isLogin === 1" class="-v" style="color: #2878ff">已登录</text>
          <text v-else class="-v">未登录</text>
        </view>
      </view>
      <img
        v-if="item.phone"
        class="phone"
        src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/admin/icon-1.png"
        alt=""
        @click="handleCallPhone"
      />
    </view>
    <view class="action">
      <view class="action-left">
        <view class="btn" @click="toCard">
          <text>查看名片</text>
          <text class="ali-icon">&#xe6c7;</text>
        </view>
        <view class="btn" @click="toEditCard">
          <text>编辑名片</text>
          <text class="ali-icon">&#xe6c7;</text>
        </view>
      </view>
      <view class="btn">
        <view
          v-if="item.memberRoleType !== MemberRoleEnum.PRINCIPAL"
          class="_operate"
          style="margin-right: 50rpx"
          @click="handleDel"
        >
          <img class="-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/admin/icon-4.png" alt="" />
          <text class="-text">删除</text>
        </view>
        <view
          class="_operate"
          @click="
            navigateTo({
              name: 'personAdd',
              options: {
                cocId: item.cocId,
                id: item.id,
                callback: () => emit('success'),
              },
            })
          "
        >
          <img class="-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/admin/icon-5.png" alt="" />
          <text class="-text">修改</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import TImage from '@/components/TImage/index.vue';
  import { leadingMemberDel } from '@/api/admin';
  import { type ILeadingMemberListResData } from '@/api/admin/types';
  import { type PropType, computed } from 'vue';
  import { MemberRoleEnum } from '@/enums/memberRoleEnum';
  import { navigateTo } from '@/router';
  import dictionary from '@/utils/dictionary';
  import { useDebounceFn } from '@vueuse/core';
  import { IsOfficialAccountEnum } from '@/enums/loginEnum';
  import { Toast } from '@/utils';

  const props = defineProps({
    item: {
      type: Object as PropType<ILeadingMemberListResData>,
      required: true,
    },
  });

  const emit = defineEmits(['success']);

  const leaderText = computed(() => {
    let memberRoleType = props.item.memberRoleType;
    return dictionary.getLocal('memberLevel').find((v) => v.dictValue === memberRoleType.toString())
      ?.dictLabel;
  });

  const handleCallPhone = () => {
    uni.makePhoneCall({
      phoneNumber: props.item.phone,
    });
  };

  const handleDel = () => {
    uni.showModal({
      title: '提示',
      content: '删除成员?',
      success: function (res) {
        if (res.confirm) {
          leadingMemberDel(props.item.id).then(() => {
            uni.showToast({
              title: '删除成功',
              icon: 'none',
            });
            emit('success');
          });
        }
      },
    });
  };

  function toCard() {
    navigateTo({
      name: 'personCard',
      options: {
        id: props.item.memberLeadingId,
      },
    });
  }

  const toEditCard = useDebounceFn(() => {
    const { memberLeadingId, appUserInfoId } = props.item;
    if (memberLeadingId && appUserInfoId) {
      navigateTo({
        name: 'adminEditPersonCard',
        options: {
          cardId: memberLeadingId,
          userId: appUserInfoId,
          callback: () => emit('success'),
        },
      });
    } else {
      Toast('该会员appUserInfoId错误');
    }
  }, 500);
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    background-color: #fff;
    margin-top: 30rpx;

    .content {
      position: relative;
      display: flex;
      padding: 30rpx;
      border-bottom: 1rpx #dddddd solid;

      .info {
        margin-left: 34rpx;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;

        ._title {
          // display: flex;
          // align-items: center;
          margin-top: 16rpx;

          .-name {
            font-size: 32rpx;
            color: #333333;
            font-weight: bold;
            max-width: 200rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .-level,
          .-leader {
            font-size: 24rpx;
            color: #333333;
            padding: 0 12rpx;
            border-radius: 20rpx;
            background-color: #ece2c7;
            width: fit-content;
            margin-top: 16rpx;
          }
          .-leader {
            background-color: #f5f5f5;
          }
        }

        ._wx {
          font-size: 28rpx;

          .-k {
            color: #333333;
          }

          .-v {
            color: #efa043;
            margin-left: 42rpx;
          }
        }

        // ._wx:nth-child(2) {
        //   margin-top: 26rpx;
        // }

        // ._wx:nth-child(3) {
        //   margin-top: 26rpx;
        // }
      }

      .phone {
        position: absolute;
        right: 30rpx;
        top: 160rpx;
        width: 50rpx;
        height: 50rpx;
      }
    }

    .action {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 86rpx;
      padding: 0 30rpx;

      &-left {
        display: flex;
        .btn {
          padding: 2rpx 18rpx;
          background-color: #f5f5f5;
          border-radius: 10rpx;
          font-size: 24rpx;
          color: #333333;
          display: flex;
          align-items: center;
          padding-right: 8rpx;
          margin-right: 40rpx;
          .ali-icon {
            font-size: 32rpx;
          }
        }
      }

      .btn {
        display: flex;

        ._operate {
          display: flex;
          align-items: center;

          .-icon {
            width: 36rpx;
            height: 36rpx;
          }

          .-text {
            font-size: 28rpx;
            color: #808080;
            margin-left: 4rpx;
          }
        }
      }
    }
  }
</style>
